<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<body>
	<h:form id="form">
		<p:growl id="messages" showDetail="true" />

		<p:panel header="Players">
			<h:panelGrid columns="2" cellpadding="5">
				<h:outputLabel value="Basic Pojo: " for="basicPojo" />
				<p:autoComplete value="#{autoCompleteBean.selectedPlayer1}"
					id="basicPojo" completeMethod="#{autoCompleteBean.completePlayer}"
					var="p" itemLabel="#{p.name}" itemValue="#{p}" converter="player"
					forceSelection="true" />

				<h:outputLabel value="Custom Content: " for="customPojo" />
				<p:autoComplete value="#{autoCompleteBean.selectedPlayer2}"
					id="customPojo" completeMethod="#{autoCompleteBean.completePlayer}"
					var="p" itemLabel="#{p.name}" itemValue="#{p}" converter="player"
					forceSelection="true">
					<p:column>
						<p:graphicImage value="/images/barca/#{p.photo}" width="40"
							height="50" />
					</p:column>

					<p:column>
                    #{p.name} - #{p.number}
                </p:column>
				</p:autoComplete>
			</h:panelGrid>
		</p:panel>

		<br />

		<p:commandButton value="Submit" update="display"
			oncomplete="dlg.show()" />

		<p:dialog header="Selected Players" widgetVar="dlg" showEffect="fade"
			hideEffect="fade" modal="true">
			<h:panelGrid columns="1" id="display">
				<h:outputText id="txt1"
					value="Player 1: #{autoCompleteBean.selectedPlayer1.name}"
					rendered="#{not empty autoCompleteBean.selectedPlayer1}" />

				<h:outputText id="txt2"
					value="Player 2: #{autoCompleteBean.selectedPlayer2.name}"
					rendered="#{not empty autoCompleteBean.selectedPlayer2}" />
			</h:panelGrid>
		</p:dialog>
	</h:form>
</body>
</html>